import React, { Component, createRef } from "react"
import { Form, Input, Button, Space, message } from "antd"
import { UserOutlined, LockOutlined, InsuranceOutlined } from "@ant-design/icons"
import Captcha from "../../components/Captcha"
import req from "../../http/req"
import url from "../../config/url"
import { withRouter } from "react-router-dom"
class Passwdform extends Component {
    state = {
        key: ""
    }
    capRef = createRef()
    render() {
        return (
            <Form
                name="normal_login"
                className="login-form"
                initialValues={{
                    remember: true,
                }}
                onFinish={this.onFinish}
            >
                <Form.Item
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: "请输入用户名！",
                        },
                    ]}
                >
                    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" size="large" />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: "请输入密码！",
                        },
                    ]}
                >
                    <Input prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="密码" size="large" />
                </Form.Item>
                <Form.Item
                    name="captcha"
                    rules={[
                        {
                            required: true,
                            message: "请输入验证码！",
                        },
                    ]}
                >
                    {/* 务必确保Form.Item有且只有一个子元素 */}
                    <div>
                        <Space size="middle">
                            <Input prefix={<InsuranceOutlined className="site-form-item-icon" />} type="text" placeholder="验证码" size="large" />
                            <Captcha h={40.14} saveKey={this.saveKey} ref={this.capRef} />
                        </Space>
                    </div>
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit" className="login-form-button" block size="large">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        )
    }

    saveKey = (key) => {
        this.setState({ key })
    }

    // onFinish：点击提交时候的回调函数（ajax发送的方法）
    // values：表单收到的数据，格式是一个对象
    onFinish = values => {
        values.key = this.state.key
        req.post(url.PasswdUrl, values).then(res => {
            if (res.data.errNo === 0) {
                // 成功了  message.success(content, [duration], onClose)
                message.success("登录成功！", 2, () => this.props.history.push("/dashboard"))
            } else {
                // 失败了
                message.error(res.data.errText)
                // 刷新验证码
                this.capRef.current.loadCaptcha()
            }
        })
    }
}

export default withRouter(Passwdform)
